<template>
  <div class="marketing" :style="{minHeight:$store.state.minHeight+'rem'}">
    <myHead title="营销活动" background-color="linear-gradient(170deg,rgba(251,68,72,1) 0%,rgba(254,111,77,1) 100%)"></myHead>
    <div class="box">
      <div class="index_lunbo">
        <div class="swiper-container" style="width: 100%;height:1.42rem;">
          <div class="swiper-wrapper" style="width: 100%;height:100%">
            <img v-for='el in lunbolist' class="swiper-slide index_swiper_listimg" :src="el.url">
          </div>
          <!-- 如果需要分页器 -->
          <div class="swiper-pagination"></div>
        </div>
      </div>
      <van-divider :style="{ borderColor: '#D3D3D3', padding: '0 .8rem',color: '#333333' }">营销中心</van-divider>
      <div class="navList">
        <router-link class="nav" to="/views/Business/marketingGoodsList?id=0" tag="div">
          <div class="navIcon">
            <img src="../../../static/img/business/skill.png" alt="">
          </div>
          <div class="navDesc">
            <div>抢购</div>
            <div>限时抢购 引爆客流</div>
          </div>
        </router-link>
        <router-link class="nav" to="/views/Business/marketingGoodsList?id=1" tag="div">
          <div class="navIcon">
            <img src="../../../static/img/business/pintuan.png" alt="">
          </div>
          <div class="navDesc">
            <div>拼团活动</div>
            <div>优惠商品物美价廉</div>
          </div>
        </router-link>
        <router-link class="nav" to="/views/Business/marketingGoodsList?id=2" tag="div">
          <div class="navIcon">
            <img src="../../../static/img/business/kanjia.png" alt="">
          </div>
          <div class="navDesc">
            <div>砍价活动</div>
            <div>邀请好友 吸粉营销</div>
          </div>
        </router-link>
        <router-link class="nav" to="/views/Business/marketingGoodsList?id=3" tag="div">
          <div class="navIcon">
            <img src="../../../static/img/business/quan.png" alt="">
          </div>
          <div class="navDesc">
            <div>优惠券</div>
            <div>发布优惠锁定客户</div>
          </div>
        </router-link>
        <router-link class="nav" to="/views/Business/marketingGoodsList?id=4" tag="div">
          <div class="navIcon">
            <img src="../../../static/img/business/fuli.png" alt="">
          </div>
          <div class="navDesc">
            <div>满减活动</div>
            <div>满减活动 薄利多销</div>
          </div>
        </router-link>
        <router-link class="nav" to="/views/Business/marketingGoodsList?id=5" tag="div">
          <div class="navIcon">
            <img src="../../../static/img/business/sale.png" alt="">
          </div>
          <div class="navDesc">
            <div>打折促销</div>
            <div>优惠促销 刺激消费</div>
          </div>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue';
  import myHead from "../../components/BusinessComponents/lib/myHead";
  import Swiper from "swiper";
  import { Divider } from 'vant';

  Vue.use(Divider);

  export default {
    name: "marketing",
    components:{
      myHead
    },
    data() {
      return {
        tab: [
          {text: '全部'},
          {text: '已入账'},
          {text: '提现'}
        ],
        lunbolist:[
          {text:'',url:'../../static/img/banner.png'},
          {text:'',url:'../../static/img/banner.png'},
          {text:'',url:'../../static/img/banner.png'}
          ],
        present: 0,
      }
    },
    mounted() {
      //    这里配置swiper轮播图
      new Swiper('.swiper-container', {
        loop: true, // 循环模式选项
        // 如果需要分页器
        pagination: {
          el: '.swiper-pagination',
        },
        autoplay: true
      });
    },
    methods: {
      back() {
        this.$router.back();
      },
      isTab(index){
        this.present = index;
      },
    }
  }
</script>

<style scoped>
  .marketing{
    background: #F5F5F5;
  }
  >>>.van-divider{
    font-size: .2rem;
  }
  .marketing .box{
    padding-top: .63rem;
    background-color: #ffffff;
  }

  /* 轮播图部分 */
  .marketing .index_lunbo {
    width: 100%;
    box-sizing: border-box;
    padding: 0 .1rem;
  }
  .marketing .index_swiper_listimg {
    width: 100%;
    height: 100%;
  }
  /* 轮播图小圆点颜色改变 */
  .marketing .swiper-pagination-bullets .swiper-pagination-bullet-active {
    background: rgba(252,216,144,.68) !important;
  }
  /* 导航列表 */
  .marketing .navList{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin: 0 .16rem;
    padding-bottom: .1rem;
  }
  .marketing .navList .nav{
    display: flex;
    margin-bottom: .18rem;
    align-items: center;
  }
  .marketing .navList .nav .navIcon{
    width: .42rem;
    height: .42rem;
    margin-right: .1rem;
  }
  .marketing .navList .nav .navDesc{
    font-size: .12rem;
    color: #999999;
  }
  .marketing .navList .nav .navDesc>div:nth-child(1){
    margin-bottom: .02rem;
    font-size: .14rem;
    color: #333333;
  }
</style>
